<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header">
    <link href="/css/phone/mui.ttf" th:href="@{/css/phone/mui.ttf}">
</head>

<!--追加样式-->
<style>
    .mui-content {
        margin-bottom: 50px;
    }

    .mui-slider {
        height: 9em;
    }

    .iconfont {
        font-size: 120%;
    }

    .mui-tab-label {
        font-size: 70%;
    }

    li {
        float: left;
        margin: 0;

    }

    .mui-table-view-cell {
        padding: 0;
    }

</style>
<body>
<div class="mui-content">
    <form method="post" action="/iphone/search">
        <div class="mui-input-row ">
            <input type="search"  placeholder="书名" name="bookName" style="float: left;width: 75%;margin:10px" >

            <button class="inline-block" style="width: 55px;height: 30px;margin-left: 10px;margin-top: 10px">搜索</button>

        </div>
    </form>
    <!--填充数据-->
    <div class="mui-row" th:each="bookmap:${CateMap}">
        <h4 style="font-family: 微软雅黑">
            <a th:href="'/iphone/classify/'+${bookmap.key}">
                <p style="padding: 5px;font-size: 18px;color: black;
                border-bottom: 1px solid #ccc;margin-bottom: 10px" th:text="${bookmap.key}">人文社科</p>
            </a>
        </h4>
        <ul>
            <li class="mui-col-xs-4" th:each="book:${bookmap.value}">
                <a th:href="'/iphone/bookinfo/'+${book.bookId}">
                    <img class="" src="img/about-zuixin-02.jpg" th:src="${book.bookImg}"
                         style="height: 100px;width: 100px"
                    >
                    <div class="" th:text="${book.bookName}">
                        品读经典，品味人生
                    </div>
                </a>
            </li>
        </ul>

    </div>


</div>

<!--底部导航栏-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item " href="/iphone">
        <span class="iconfont icon-geren1"></span><br/>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="/iphone/social">
        <span class="iconfont icon-jiaoliuweixuanzhong"></span><br/>
        <span class="mui-tab-label">交流圈</span>
    </a>
    <a class="mui-tab-item mui-active" href="#">
        <span class="iconfont icon-kucun"></span><br/>
        <span class="mui-tab-label">书库</span>
    </a>
    <a class="mui-tab-item" href="/iphone/user">
        <span class="iconfont icon-gerenzhongxin"></span><br/>
        <span class="mui-tab-label">我的</span>

    </a>
</nav>

</body>

<script src="/js/phone/mui.min.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui('body').on('tap', 'a', function () {
        document.location.href = this.href;
    });

    function search(t) {
        if (t.keyCode == 13) {
            alert("fdsafa");
        }
    }

    //    $(document).on("keypress", function (event) {
    //        if (event.keyCode == "13") {
    //            send();
    //        }
    //    });
</script>

</html>`